<template>
  <div class="test-container">
    <div class="top-main">
      <search :listQuery="listQuery" :path="$route.name"></search>
    </div>
    <div class="bottom-main">
      <div class="list-button-group">
        <div class="button-item">
          <el-button type="primary" icon="el-icon-plus" @click="handleEdit()">
            新增
          </el-button>
        </div>
        <div class="button-item">
          <el-button type="primary" icon="el-icon-plus" @click="handleImport()">
            导入
          </el-button>
        </div>
        <div class="button-item">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="downloadExcel()"
          >
            导出
          </el-button>
        </div>
        <div class="button-item">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="downloadExcelNEW()"
          >
            下载模板
          </el-button>
        </div>
      </div>
      <div class="table-list">
        <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows"
          highlight-current-row
          height="100%"
          :header-cell-style="{
            'border-bottom': '1px solid #cbcccd',
            'border-top': '1px solid #cbcccd',
          }"
        >
          <el-table-column
            align="center"
            show-overflow-tooltip
            type="selection"
          ></el-table-column>

          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="mingcheng"
            label="名称"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="xingbie"
            label="型别"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="chuchanghm"
            label="出厂号码"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="weiyibm"
            label="唯一编码"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="danwei"
            label="单位"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="tuopanbh"
            label="托盘号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="huoweibh"
            label="货位号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="leixing"
            label="类型"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guazaih"
            label="挂载号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guishuh"
            label="归属号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guidingfxzq"
            label="规定返修周期"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="tiaoma"
            label="条码"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="zhuanye"
            label="专业"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="bianma"
            label="编码"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="zhongyaod"
            label="重要度"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="shengchancj"
            label="生产厂家"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="chuchangrq"
            label="出厂日期"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="jishilx"
            label="计时类型"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="zonggongzsc"
            label="总工作时次"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="xiuhougzsc"
            label="修后工作时次"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="cexuh"
            label="删序号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="tuzhibh"
            label="图纸编号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="pihao"
            label="批号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="xianchuzk"
            label="现处状况"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="zhuangkuangsm"
            label="状况说明"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="cunfangwz"
            label="存放位置"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="fanxiucs"
            label="翻修次数"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="chuyucjszt"
            label="处于超技术状态"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="anzhuangwz"
            label="安装位置"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="weizhi"
            label="位置"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="anzhuangxh"
            label="安装序号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="shifouqy"
            label="是否启用"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="gongchengh"
            label="工程号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="zhangjieh"
            label="章节号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="beizhu"
            label="备注"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            label="挂架状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.guajiazt == 1">未入库</span>
              <span v-if="scope.row.guajiazt == 2">入库</span>
              <span v-if="scope.row.guajiazt == 3">使用出库</span>
              <span v-if="scope.row.guajiazt == 4">维修出库</span>
              <span v-if="scope.row.guajiazt == 5">盘点出库</span>
              <span v-if="scope.row.guajiazt == 6">报损</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            label="挂架操作状态"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{ $util.getguajiaczzt(scope.row.caozuozt) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="createName"
            label="创建人"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="createTime"
            label="创建时间"
          ></el-table-column>
          <!-- 隔断 -->
          <!-- 隔断 -->
          <!-- 隔断 -->
          <!-- 隔断 -->
          <!-- 隔断 -->
          <!-- 隔断 -->
          <!-- <el-table-column
            align="center"
            show-overflow-tooltip
            prop="waiguamc"
            label="挂架名称"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="tuopanbh"
            label="托盘号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="huoweibh"
            label="货位号"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="xianchuwz"
            label="挂架类型"
          >
            <template slot-scope="scope">
              <span>{{ $util.gethuojiaxz(scope.row.huojiaxz) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="chuchanghm"
            label="出厂号码"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="xianchuwz"
            label="现处位置"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.xianchuwz == 1">装机</span>
              <span v-if="scope.row.xianchuwz == 2">返修中</span>
              <span v-if="scope.row.xianchuwz == 3">在库</span>
              <span v-if="scope.row.xianchuwz == 4">驻训</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            label="挂架状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.guajiazt == 1">未入库</span>
              <span v-if="scope.row.guajiazt == 2">入库</span>
              <span v-if="scope.row.guajiazt == 3">使用出库</span>
              <span v-if="scope.row.guajiazt == 4">维修出库</span>
              <span v-if="scope.row.guajiazt == 5">盘点出库</span>
              <span v-if="scope.row.guajiazt == 6">报损</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            label="挂架操作状态"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{ $util.getguajiaczzt(scope.row.caozuozt) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="shengchancj"
            label="生产厂家"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="chuchangrq"
            label="出厂日期"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="weiyibm"
            label="唯一编码"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="shiyongcs"
            label="使用次数"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="shengyucs"
            label="剩余次数"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guishufjh"
            label="归属飞机号"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guazaifjh"
            label="挂载飞机号"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guidingfxzq"
            label="规定返修周期"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="yucefxzq"
            label="预测返修周期"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="fanxiucj"
            label="返修厂家"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="xiuhouxlzq"
            label="修后修理周期"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="lishigzqk"
            label="历史故障情况"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="jishutblsqk"
            label="技术通报落实情况"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="jianxiurq"
            label="检修日期"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="xiacijxrq"
            label="下次检修日期"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="jianxiur"
            label="检修人"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="beizhu"
            label="备注"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="rukur"
            label="入库人"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="jingshour"
            label="经手人"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="chukur"
            label="出库人"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guadanghm"
            label="挂弹钩号码"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guadanccrq"
            label="挂弹钩出厂日期"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guadangshiycs"
            label="挂弹钩使用次数"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guadangshengycs"
            label="挂弹钩剩余次数"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guadangyj"
            label="挂弹钩预警"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="huojianfsq"
            label="火箭发射器"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guansl"
            label="管的数量"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="guansm"
            label="管的寿命"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="yifascs"
            label="已发射次数"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="shengyucishu"
            label="剩余次数"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="yujing"
            label="到2次预警"
          ></el-table-column>
          -->
          <!-- <el-table-column
            align="center"
            show-overflow-tooltip
            prop="tuopanid"
            label="托盘id"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="huoweiid"
            label="货位id"
          ></el-table-column> -->

          <!-- <el-table-column align="center" show-overflow-tooltip label="货架选择">
            <template slot-scope="scope">
              <span v-if="scope.row.huojiaxz == 1">L类型 </span>
              <span v-if="scope.row.huojiaxz == 2">S类型</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="createName"
            label="创建人"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="createTime"
            label="创建时间"
          ></el-table-column> -->
          <el-table-column
            show-overflow-tooltip
            label="操作"
            fixed="right"
            min-width="200"
          >
            <template #default="{ row }">
              <el-button type="text" @click="showdetail(row)">明细</el-button>
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        :current-page="listQuery.pageIndex"
        :page-size="listQuery.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <detail
      v-if="detailshow"
      :gobacktitle="gobacktitle"
      :datarow="detailrow"
    ></detail>
    <edit ref="edit" @fetch-data="fetchData"></edit>
    <!-- 导入文件start -->
    <el-dialog
      v-if="importShow == true"
      :close-on-click-modal="false"
      :visible.sync="importShow"
      destroy-on-close
      title="导入文件"
      class="m-dialog"
      :append-to-body="true"
    >
      <import-w-z
        ref="importWz"
        api-url="/wuzi/importWuzi"
        @success="uploadSuccess"
      ></import-w-z>
    </el-dialog>
  </div>
</template>

<script>
  let _listQuery = {
    pageIndex: 1,
    pageSize: 10,
  }
  import excelDW from '@/assets/excelTemplate/excel.xlsx'
  import search from './components/search.vue'
  import {
    queryguajiaPage,
    deleteguajia,
    queryguajiamx,
    downloadStrategyResult,
  } from '@/api/kunei'
  import { queryguajialxAll } from '@/api/cangkujichu'
  import Detail from './components/detail.vue'
  import edit from './components/maintenanceManagementEdit.vue'
  import ImportWZ from './components/ImportWuzi'
  export default {
    name: 'WarehouseManagement',
    components: { Detail, search, edit, ImportWZ },
    data() {
      return {
        zhuangtaiArr: [],
        listQuery: Object.assign({}, _listQuery),
        list: null,
        listLoading: false,
        layout: 'total,sizes,prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        detailrow: {},
        detailshow: false,
        addshow: false,
        editData: {},
        importShow: false,
        guajialx: [],
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      async getguajialx() {
        let res = await queryguajialxAll()
        this.guajialx = res.data
      },
      getguajia(id) {
        if (id) {
          let datarow = this.guajialx.filter((item) => item.id == id)
          return datarow.length > 0 ? datarow[0].leixingmc : ''
        } else {
          return ''
        }
      },
      uploadSuccess() {
        this.importShow = false
        this.fetchData()
      },
      handleImport() {
        this.importShow = true
      },
      setSelectRows(val) {
        this.selectRows = val
      },

      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await deleteguajia({ id: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        }
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.fetchData()
      },
      queryData() {
        this.listQuery.pageIndex = 1
        this.fetchData()
      },

      add() {
        this.addshow = true
        this.gobacktitle = '新增'
      },
      handleEdit(row) {
        if (row) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      async showdetail(row) {
        const mxData = await queryguajiamx({ id: row.id })
        this.detailshow = true
        this.gobacktitle = '挂架明细'
        this.detailrow.row = mxData.data //当前行的数据
      },

      async fetchData() {
        const res = await queryguajiaPage(this.listQuery)
        this.list = res.data.rows
        this.total = res.data.total
      },
      search() {
        //搜索
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      resetlist() {
        //重置
        this.listQuery = Object.assign({}, _listQuery)
        this.fetchData()
      },
      // 导出
      downloadExcel() {
        //调用接口
        downloadStrategyResult({}).then((res) => {
          this.downloadCallback(res, '挂架信息.xlsx')
        })
      },
      //生成下载文件
      downloadCallback(res, fileName) {
        const link = document.createElement('a')
        const content = res
        const blob = new Blob([content], { type: 'application/x-msdownload' })
        let _fileName = fileName
        link.style.display = 'none'
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL
        link.href = url.createObjectURL(blob)
        link.download = _fileName //下载的文件名称
        link.click()
        window.URL.revokeObjectURL(url)

        // if ('download' in document.createElement('a')) {
        //   // 非IE下载
        //   const elink = document.createElement('a')
        //   elink.download = fileName
        //   elink.style.display = 'none'
        //   elink.href = URL.createObjectURL(content)
        //   document.body.appendChild(elink)
        //   elink.click()
        //   URL.revokeObjectURL(elink.href) // 释放URL 对象
        //   document.body.removeChild(elink)
        // } else {
        //   // IE10+下载
        //   navigator.msSaveBlob(blob, fileName)
        // }
      },
      // 下载模板
      downloadExcelNEW() {
        let a = document.createElement('a')
        a.href = excelDW
        a.download = '挂架导入模板.xlsx'
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()
        a.remove()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .test-container {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: #f6f8f9 !important;
    height: 100%;

    .top-main {
      width: 100%;
      background: #fff;
      padding: 10px 0;
    }

    .bottom-main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      background-color: #fff;
      margin-top: 10px;
      padding-bottom: 10px;

      .list-button-group {
        display: flex;
        flex-direction: row;
        padding: 20px;

        .button-item {
          padding: 0px 10px;
        }

        .button-item:first-child,
        &:last-child {
          padding: 0px 10px 0 0;
        }
      }

      .table-list {
        flex: 1;
        padding: 0 20px 20px;
      }
    }

    .el-button {
      font-size: 0.14rem !important;
    }
  }
</style>
